<template>
  <el-tree-select
    v-model="dormitory"
    :data="buildingTreeList"
    node-key="id"
    value-key="sourceId"
    :props="{ value: 'sourceId', label: 'name', children: 'children' }"
    :default-expanded-keys="defaultExpandKeys"
    check-strictly
    :render-after-expand="false"
    :style="style"
    @node-click="handleNodeClick"
    clearable
    filterable
    @clear="handleNodeClick(null)"
    :default-expand-all="defaultExpandAll"
  />
</template>

<script setup lang="ts">
import { BuildingTreeVO, BuildingTreeQuery } from '@/api/dormitory/buildingTree/types';
import { listBuildingTree } from '@/api/dormitory/buildingTree';
import { handleTree } from '@/utils/ruoyi';
import { useDictStore } from '@/store/modules/dict';

const queryParamsTree = reactive<BuildingTreeQuery>({
  parentId: undefined,
  type: undefined,
  name: undefined,
  orderNum: undefined,
  status: 1
});
const defaultExpandKeys = ref([]);
const defaultExpandAll = ref(false);
const buildingTreeListAll = ref<Array<BuildingTreeVO>>([]);
const buildingTreeList = ref<Array<BuildingTreeVO>>([]);

import { propTypes } from '@/utils/propTypes';
import { OssVO } from '@/api/system/oss/types';
import { listByIds } from '@/api/system/oss';
// import { useDormitoryTree } from '@/utils/dormitory';
// const { buildingTreeList } = toRefs<any>(useDormitoryTree('buildingTreeList'));
const dormitory = ref<string>('');

const props = defineProps({
  modelValue: propTypes.string,
  buildingId: propTypes.string,
  style: {
    type: Object,
    default: () => {
      return { width: '240px' };
    }
  }
  // width: propTypes.string.def("240") || propTypes.number.def(240)
});

const buildingIdContent = ref('');
watch(
  () => props.buildingId,
  (v) => {
    if (v != buildingIdContent.value) {
      buildingIdContent.value = v;
      if (buildingTreeListAll.value.length == 0) return;
      for (let tree of buildingTreeListAll.value[0]['children']) {
        if (tree.sourceId == v) {
          buildingTreeList.value = tree.children;
          defaultExpandAll.value = true;
          break;
        }
      }
    }
  },
  { immediate: true }
);

watch(
  () => props.modelValue,
  async (val) => {
    if (val != dormitory.value) dormitory.value = val;
  },
  { deep: true, immediate: true }
);

const clear = () => {
  dormitory.value = '';
  emit('clear');
  emit('update:modelValue', undefined);
};

const getList = async () => {
  await listBuildingTree(queryParamsTree).then((respon) => {
    const data = handleTree<BuildingTreeVO>(respon.data, 'id', 'parentId');
    buildingTreeListAll.value = data;
    buildingTreeList.value = data;
    if (data) {
      defaultExpandKeys.value = [data[0].id];
    }
    // console.log('props.buildingId', props.buildingId);
    if (props.buildingId) {
      for (let tree of buildingTreeListAll.value[0]['children']) {
        if (tree.sourceId === props.buildingId) {
          buildingTreeList.value = tree.children;
          break;
        }
      }
    }
  });
};

const emit = defineEmits(['node-click', 'clear', 'update:modelValue']);
const handleNodeClick = (data: any) => {
  emit('update:modelValue', data?.sourceId);
  emit('node-click', data);
};

onMounted(() => {
  getList();
});

defineExpose({
  clear
});
</script>

<style scoped></style>
